<template>
	<view class="container">
		<view class="pay_top">
			<!-- 收款人 -->
			<view class="payee pd_lr24">
				<text class="hang1 font32">请向 182****7830 付款</text>
				<view class="hang2 m_t14 font28 bold">
					<text class="font44 m_r10">8,422.00</text>USDT
				</view>
			</view>
			<!-- 圆形样式 -->
			<view class="cirle_box">
				<view class="cirle_left"></view>
				<view class="line"></view>
				<view class="cirle_right"></view>
			</view>
			<!-- 订单详情 -->
			<view class="order_detail pd_lr24">
				<view class="orderNumber">
					<text class="title font28">订单号</text>
					<text class="font28">123456456456</text>
				</view>
				<view class="orderCount">
					<text class="title font28">交易数量</text>
					<view class="font28">2512.00 <text class="m_l20 font26">BTC</text></view>
				</view>
				<view class="orderPrice">
					<text class="title font28">交易价格</text>
					<view class="font28">0.369 <text class="m_l20 font26">BTC/USDT</text></view>
				</view>
			</view>
		</view>
		<view class="pay_cen m_t30">
			<view class="cen_header">
				<text class="font32 bold">付款方式</text>
				<view class="ali_box">
					<image class="ali m_r10" src="../../static/equity_img/ali.png" mode=""></image>
					<text class="font30 m_r20">支付宝</text>
					<image class="downArrow" src="../../static/my_img/arrow_r.png" mode=""></image>
				</view>
			</view>
			<!-- 圆形样式 -->
			<view class="cirle_box">
				<view class="cirle_left"></view>
				<view class="line"></view>
				<view class="cirle_right"></view>
			</view>
			<view class="cen_footer">
				<image src="../../static/equity_img/erwm.png" mode=""></image>
				<text class="font28 m_t20">扫一扫   完成付款</text>
			</view>
		</view>
		<view class="pay_bot">
			<button class="cancel font32" type="default" size="default" @tap="cancel">取消</button>
			<button class="confirm font32" type="primary" @tap="sure">确认打款</button>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				
			}
		},
		methods: {
			// 取消
			cancel () {
				uni.switchTab({
					url:"../tabbar/equity"
				})
			},
			// 确认打款
			sure () {
				uni.navigateTo({
					url:"./pay_over"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background: #f8f8f8 !important;
		overflow: hidden;
		border-top: 1upx solid #EFEFF0;
		position: relative;
	}
		// 付款顶部
		.pay_top {
			margin: 20upx 30upx;
			padding: 30upx 0;
			background: #fff;
			border-radius: 20upx;
			
			// 付款人
			.payee{
				padding: 20upx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			// 订单详情
			.order_detail {
				padding-top: 20upx;
				display: flex;
				flex-direction: column;
				
				.orderNumber, .orderCount, .orderPrice {
					display: flex;
					align-items: center;
					.title {
						width: 20vw;
						display: block;
						margin: 10upx 50upx 10upx 0;
						color: #696d8b;
					}
				}
			}
		}
		
		// 付款二维码
		.pay_cen {
			margin: 24upx 30upx;
			padding: 30upx 0;
			background: #fff;
			border-radius: 20upx;
			.cen_header {
				padding: 0 24upx 20upx 24upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ali_box {
					display: flex;
					align-items: center;
					.ali {
						width: 36upx;
						height: 36upx;
					}
					.downArrow {
						width: 14upx;
						height: 24upx;
						transform: rotate(90deg);
					}
				}
			}
			
			.cen_footer {
				padding: 24upx 0 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				color: #737793;
				image {
					width: 350upx;
					height: 350upx;
				}
			}
			
		}
		
		// 付款按钮
		.pay_bot{
			width: 100%;
			padding: 30upx 20upx;
			background: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.cancel {
				width: 220upx;
				background: #ccc;
			}
			
			.confirm {
				width: 440upx;
				background: linear-gradient(top, #3e9dff, #5e60e8);
			}
			
			button {
				height: 80upx;
				color: #fff;
				border: none;
				line-height: 80upx;
			}
			
			button::after {
				border: 0;
			}
		}
		
		// 密封线
		.cirle_box {
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// 圆圈
			.cirle_left {
				width: 12upx;
				height: 20upx;
				border-radius: 0px 60upx 60upx 0;
				border-left: none;
				background: #f3f6f7;
			}
			
			.cirle_right {
				width: 12upx;
				height: 20upx;
				border-radius: 60upx 0px 0 60upx;
				border-right: none;
				background: #f3f6f7;
			}
			
			.line {
				width: 86vw;
				border-top: 1px dashed #c7c7c7;
			}
		}
		

</style>
